<template>
  <div class="my-receiver">
    <el-table
      :data="handle_rate"
      style="width:100%"
      height="190px"
      :row-style="tableRowStyle"
      :header-cell-style="tableHeaderColor"
    >
      <el-table-column prop="Receiver" label="接球者" width="100">
      </el-table-column>
      <el-table-column prop="Crosses" label="次数" sortable width="115">
      </el-table-column>
      <el-table-column prop="xA" label="xA" sortable width="115">
      </el-table-column>
      <el-table-column prop="Shot_assist" label="射门助攻" sortable width="115">
      </el-table-column>
      <el-table-column prop="Assist" label="助攻" sortable width="115">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "CrossesReceiver",
  props: {
    table: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    //设置表格行的样式
    tableRowStyle({ row, rowIndex }) {
      return { "background-color": "#F1F6F9" };
    },
    //设置表头的样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return { "background-color": "#F1F6F9" };
    },
  },
  computed: {
    handle_rate() {
      return this.table.map((item) => {
        return {
          ...item,
          rate: item.rate + "%",
        };
      });
    },
  },
};
</script>

<style scoped>
.my-receiver {
  width: 560px;
  height: 190px;
  color: #656f73;
  background-color: blue;
}
.el-table {
  /*margin-top: 5px;*/
  /*border-color: red;*/
  font-size: 11px;
  /*line-height: 10px;*/
  background-color: #f1f6f9;
  /*font-weight: bold;*/
}
.my-receiver /deep/ .el-table td {
  padding: 3px 0;
}
.my-receiver /deep/ .is-leaf {
  padding: 6px 0;
}
</style>
